<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
		<style>
			*{
				text-align: center;
				font-size: 108%;
				font-family: cursive;
			}
			li{
				list-style: none;
			}
			/* .main{
				margin-right: 9.375rem;
			} */
			.view{
				margin-top: 1.5625rem;
				color: darkgrey;
				margin-right: 8.125rem;
			}
			.destroy{
				display: none;
				
			}
			.view:hover .destroy{
				display: inline;
			}
			.todo-list{
				width: 21.875rem;
				margin-left: 29.375rem;
				background-color: aliceblue;
			}
			.footer{
				margin-top: 1.5625rem;
				color: darkgrey;
				margin-right: 3rem;
			}
			.todo-count{
				margin-right: 1.875rem;
			}
			.index{
				display:inline-block;
				vertical-align:middle;
				text-align: left;
			}
			.in{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 主体区域 -->
		<section id="todoapp">
			<!-- 输入框 -->
			<header class="header">
				<h1>记事本</h1>
				<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
				class="new-todo"/>
			</header>
			<!-- 列表区域 -->
			<section class="main">
				<ul class="todo-list">
					<li class="todo" v-for="(item,index) in List">
						<div class="view">
							<span class="index">{{ index+1 }}.</span>
							<label class="in">{{item}}</label>
							<button class="destroy" @click="remove(index)" >*</button>
						</div>
					</li>
				</ul>
			</section>
			<!-- 统计和清空 -->
			<footer class="footer">
				<span class="todo-count" v-if="List.length!=0">
					<strong>{{List.length}}</strong>
					"item left"
				</span>
				<button class="clear-completed" @click="del" v-show="List.length!=0">Clear</button>
			</footer>
		</section>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#todoapp",
				data:{
					List:[],
					inputValue:"",
				},
				methods:{
					add:function(){
						this.List.push(this.inputValue);
						this.inputValue = "";
					},
					remove:function(index){
						this.List.splice(index,1);
						//console.log(index);
					},
					del:function(){
						this.List = [];
					}
				}
			})
		</script>
	</body>
</html>
